import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
import _Slide from "@mui/material/Slide";
import _ClickAwayListener from "@mui/material/ClickAwayListener";
import _Collapse from "@mui/material/Collapse";
import _MenuList from "@mui/material/MenuList";
import _MenuItem from "@mui/material/MenuItem";
import { useReactive, useSafeState } from "ahooks";
import classNames from "classnames";
import React, { useEffect } from "react";
import SecondaryLayout from "../../compoents/secondary-layout";
import useRouter from "../../hooks/useRouter";
import TxnDetail from "./txn-detail";
import classes from "./txn.module.less";
import utilsFilter from "../../utils/filters";
import useServices from "../../hooks/useRequest";
import { tradeBill, getTokenRecord } from "../../api/wallet";
import { TransitionGroup } from "react-transition-group";
import { formateDate, matchTheme, getChainName, getMapFinalValue } from "../../utils";
import { useDispatch, useSelector } from "react-redux";
import useCalculateAmount from "../../hooks/useCalculateAmount";
import { useTranslation } from "react-i18next";
import { LocalKeyMap } from "../../local";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function Txn() {
    var _useRouter = useRouter(), query = _useRouter.location.query;
    var _useSafeState = _sliced_to_array(useSafeState(null), 2), anchorEl = _useSafeState[0], setAnchorEl = _useSafeState[1];
    var toFormatEther = useCalculateAmount().toFormatEther;
    var t = useTranslation().t;
    var theme = useSelector(function(state) {
        return state.app.theme;
    });
    var dispatch = useDispatch();
    var services = useServices({
        tradeBill: tradeBill,
        getTokenRecord: getTokenRecord
    });
    var fetchBill = function() {
        var _ref = _async_to_generator(function() {
            var _ref, code, data, id, currentItem, currentIndex, e;
            return _ts_generator(this, function(_state) {
                switch(_state.label){
                    case 0:
                        _state.trys.push([
                            0,
                            2,
                            ,
                            3
                        ]);
                        return [
                            4,
                            services.getTokenRecord({
                                // coinId: [state.activeCoin.coinId],
                                pageNum: 1,
                                pageSize: 1000,
                                contractAddress: state.activeCoin.contractAddress,
                                chainType: [
                                    state.activeCoin.chainType
                                ]
                            })
                        ];
                    case 1:
                        _ref = _state.sent(), code = _ref.code, data = _ref.data;
                        if (code == 200) {
                            if ((query === null || query === void 0 ? void 0 : query.from) === "sendToken") {
                                state.selectTxnDetail = data.list[0];
                                state.selectIndex = 0;
                            }
                            if ((query === null || query === void 0 ? void 0 : query.from) === "goDetail") {
                                id = query === null || query === void 0 ? void 0 : query.detailId;
                                currentItem = data.list.find(function(item) {
                                    return item.id == id;
                                });
                                currentIndex = data.list.findIndex(function(item) {
                                    return item.id == id;
                                });
                                state.selectTxnDetail = currentItem;
                                state.selectIndex = currentIndex;
                            }
                            state.billList = data.list || [];
                        }
                        return [
                            3,
                            3
                        ];
                    case 2:
                        e = _state.sent();
                        return [
                            3,
                            3
                        ];
                    case 3:
                        return [
                            2
                        ];
                }
            });
        });
        return function fetchBill() {
            return _ref.apply(this, arguments);
        };
    }();
    var state = useReactive({
        selectTxnDetail: null,
        selectIndex: null,
        accountAmount: (query === null || query === void 0 ? void 0 : query.accountAmount) || [],
        activeCoin: (query === null || query === void 0 ? void 0 : query.activeCoin) || {},
        billList: []
    });
    var changeCoin = function(coin) {
        state.activeCoin = coin;
        setAnchorEl(null);
    };
    var changeSelectDetailStatus = function(newDetail) {
        if (state.selectIndex || state.selectIndex == 0) {
            state.billList[state.selectIndex] = newDetail;
        }
    };
    useEffect(function() {
        fetchBill();
    }, [
        state.activeCoin.coinId
    ]);
    return /*#__PURE__*/ _jsxs(TransitionGroup, {
        className: "animation_wrap",
        children: [
            /*#__PURE__*/ _jsx(SecondaryLayout, {
                title: t(LocalKeyMap["txn.title"]),
                className: classNames(state.selectTxnDetail ? classes.v_h : ""),
                children: /*#__PURE__*/ _jsx("div", {
                    className: classes.txn,
                    children: /*#__PURE__*/ _jsxs("div", {
                        className: classes.txn_wrap,
                        children: [
                            /*#__PURE__*/ _jsxs("div", {
                                className: classes.info,
                                children: [
                                    /*#__PURE__*/ _jsxs("div", {
                                        className: classes.head,
                                        children: [
                                            /*#__PURE__*/ _jsx("div", {
                                                className: classes.title,
                                                children: t(LocalKeyMap.token)
                                            }),
                                            /*#__PURE__*/ _jsx("div", {
                                                children: /*#__PURE__*/ _jsx(_ClickAwayListener, {
                                                    mouseEvent: "onMouseDown",
                                                    touchEvent: "onTouchStart",
                                                    onClickAway: function() {
                                                        return setAnchorEl(null);
                                                    },
                                                    children: /*#__PURE__*/ _jsxs("div", {
                                                        children: [
                                                            /*#__PURE__*/ _jsxs("div", {
                                                                className: classes.coin,
                                                                onClick: function(e) {
                                                                    if (anchorEl) {
                                                                        setAnchorEl(null);
                                                                        return;
                                                                    }
                                                                    setAnchorEl(e.currentTarget);
                                                                },
                                                                children: [
                                                                    /*#__PURE__*/ _jsx("span", {
                                                                        children: state.activeCoin.coinName
                                                                    }),
                                                                    /*#__PURE__*/ _jsx("div", {
                                                                        className: classes.drop_icon,
                                                                        children: /*#__PURE__*/ _jsx("img", {
                                                                            src: matchTheme(theme, {
                                                                                light: require("../../assets/icons/light/drop.svg"),
                                                                                dark: require("../../assets/icons/dark/drop.svg")
                                                                            })
                                                                        })
                                                                    })
                                                                ]
                                                            }),
                                                            " ",
                                                            /*#__PURE__*/ _jsx(_Collapse, {
                                                                in: Boolean(anchorEl),
                                                                className: classes.menu,
                                                                unmountOnExit: true,
                                                                children: /*#__PURE__*/ _jsx(_MenuList, {
                                                                    children: state.accountAmount.map(function(coin) {
                                                                        return /*#__PURE__*/ _jsx(_MenuItem, {
                                                                            onClick: function() {
                                                                                return changeCoin(coin);
                                                                            },
                                                                            className: classes.menu_item,
                                                                            children: /*#__PURE__*/ _jsxs("div", {
                                                                                children: [
                                                                                    /*#__PURE__*/ _jsx("img", {
                                                                                        src: getMapFinalValue([
                                                                                            getChainName(coin.chainType)
                                                                                        ], {
                                                                                            BSC: matchTheme(theme, {
                                                                                                light: require("../../assets/icons/light/bnb.svg"),
                                                                                                dark: require("../../assets/icons/dark/bnb.svg")
                                                                                            }),
                                                                                            ETHEREUM: matchTheme(theme, {
                                                                                                light: require("../../assets/icons/light/eth.svg"),
                                                                                                dark: require("../../assets/icons/dark/eth.svg")
                                                                                            }),
                                                                                            CONFLUX: matchTheme(theme, {
                                                                                                light: require("../../assets/icons/light/conflux.svg"),
                                                                                                dark: require("../../assets/icons/dark/conflux.svg")
                                                                                            })
                                                                                        })
                                                                                    }),
                                                                                    /*#__PURE__*/ _jsx("span", {
                                                                                        children: coin.coinName
                                                                                    })
                                                                                ]
                                                                            })
                                                                        }, coin.coinId);
                                                                    })
                                                                })
                                                            })
                                                        ]
                                                    })
                                                })
                                            })
                                        ]
                                    }),
                                    /*#__PURE__*/ _jsxs("div", {
                                        className: classes.amount,
                                        children: [
                                            /*#__PURE__*/ _jsx("div", {
                                                className: classes.amount_icon,
                                                children: /*#__PURE__*/ _jsx("img", {
                                                    src: getMapFinalValue([
                                                        getChainName(state.activeCoin.chainType)
                                                    ], {
                                                        ETHEREUM: require("../../assets/icons/eth.svg"),
                                                        BSC: require("../../assets/icons/bnb.svg"),
                                                        CONFLUX: require("../../assets/icons/conflux.svg")
                                                    })
                                                })
                                            }),
                                            /*#__PURE__*/ _jsx("span", {
                                                children: utilsFilter.toFormatEther(state.activeCoin.balance, state.activeCoin.digits)
                                            })
                                        ]
                                    }),
                                    /*#__PURE__*/ _jsx("div", {
                                        className: classes.estimated,
                                        children: /*#__PURE__*/ _jsxs("span", {
                                            children: [
                                                t(LocalKeyMap["txn.estimatedValue"]),
                                                ":",
                                                " ",
                                                utilsFilter.toFormatUSD(state.activeCoin.convertActualAmount, 0),
                                                " ",
                                                "USD",
                                                " "
                                            ]
                                        })
                                    })
                                ]
                            }),
                            /*#__PURE__*/ _jsx("div", {
                                className: classes.history,
                                children: state.billList.length > 0 ? /*#__PURE__*/ _jsx("div", {
                                    className: classes.history_wrap,
                                    children: /*#__PURE__*/ _jsx("div", {
                                        className: classes.history_scroller,
                                        children: /*#__PURE__*/ _jsx("div", {
                                            className: classes.history_list,
                                            children: state.billList.map(function(b, i) {
                                                return /*#__PURE__*/ _jsxs("div", {
                                                    className: classes.item,
                                                    onClick: function() {
                                                        state.selectTxnDetail = b;
                                                        state.selectIndex = i;
                                                    },
                                                    children: [
                                                        /*#__PURE__*/ _jsxs("div", {
                                                            className: classes.t,
                                                            children: [
                                                                /*#__PURE__*/ _jsxs("span", {
                                                                    children: [
                                                                        b.type === "in" ? "+" : "-",
                                                                        " ",
                                                                        toFormatEther(b.amount, {
                                                                            contract: b.contract,
                                                                            chainType: b.chainType
                                                                        })
                                                                    ]
                                                                }),
                                                                /*#__PURE__*/ _jsx("div", {
                                                                    className: classes.unit,
                                                                    children: state.activeCoin.coinName
                                                                })
                                                            ]
                                                        }),
                                                        /*#__PURE__*/ _jsxs("div", {
                                                            className: classes.status,
                                                            children: [
                                                                /*#__PURE__*/ _jsx("div", {
                                                                    className: classes.time,
                                                                    children: formateDate(b.transferTime, "MM-DD HH:mm UTC+8")
                                                                }),
                                                                /*#__PURE__*/ _jsx("div", {
                                                                    className: classNames(classes.s, b.status === "success" ? classes.success : b.status === "active" ? classes.padding : classes.fail),
                                                                    children: b.status === "success" ? t(LocalKeyMap["txn.status.comfirmed"]) : b.status === "active" ? t(LocalKeyMap["txn.status.padding"]) : t(LocalKeyMap["txn.status.failed"])
                                                                })
                                                            ]
                                                        })
                                                    ]
                                                }, i);
                                            })
                                        })
                                    })
                                }) : /*#__PURE__*/ _jsx("div", {
                                    className: classes.empty,
                                    children: t(LocalKeyMap["txn.empty"])
                                })
                            })
                        ]
                    })
                })
            }),
            state.selectTxnDetail && /*#__PURE__*/ _jsx(_Slide, {
                direction: "left",
                unmountOnExit: true,
                children: /*#__PURE__*/ _jsx(SecondaryLayout, {
                    className: classes.trading_details_layout,
                    title: t(LocalKeyMap["txnDetails.title"]),
                    hasBack: (query === null || query === void 0 ? void 0 : query.from) !== "sendToken",
                    backFn: function() {
                        if ((query === null || query === void 0 ? void 0 : query.from) === "goDetail") {
                            dispatch.app.BACK();
                        } else {
                            state.selectTxnDetail = null;
                            state.selectIndex = null;
                        }
                    },
                    children: /*#__PURE__*/ _jsx(TxnDetail, _object_spread_props(_object_spread({}, state.selectTxnDetail), {
                        coinName: state.activeCoin.coinName,
                        handlerChangeStatus: changeSelectDetailStatus
                    }))
                })
            })
        ]
    });
}
export default Txn;

 //# sourceMappingURL=index.js.map